<template>
  <div class="wrapper">
    <div class="danmu" style="position:absolute;top:20px;width:100%;z-index:3">
      <vue-danmaku ref="danmaku" :danmus="awardlist" useSlot style="height:200px" :speeds="50" :channels="3" :right="80"
        :top="20">
        <template slot="dm" slot-scope="{danmu}">
          <div class="danmu" style="border-radius:20px;font-size:12px;">
            <span style="background:rgba(0,0,0,0.5);padding:2px 10px;border-radius:10px">
              恭喜【
              <span style="font-weight:bold;color:RGB(237, 170, 43);">{{ danmu.nickname }}</span>
              】抽到一盒七彩孔雀提供的茶月饼
            </span>
          </div>
        </template>
        <div></div>
      </vue-danmaku>
    </div>
    <div class="clicktip" v-if="ifshowtip">
      <img src="../assets/images/clickicon.png" width="200px">
      <el-button class="button_style" @click="showtip()" style="position:relative;right:20px">知道了</el-button>
    </div>
    <div class="totalcount">

    </div>
    <img src="../assets/images/slogan.png" style="display:none" id="slogan">
    <img src="../assets/images/code.png" style="display:none" id="qr_code">
    <img src="../assets/images/yc.png" style="display:none" id="yc">

    <img :src="movesrc" style="display:none" id="target">
    <div class="compose_share" v-if="ifshare" @click="ifshare=false;ifaward = false">
      <img :src="compose_sharepic">
      <span style="color:white;margin-top:15px">长按图片保存分享</span>
    </div>
    <div class="compose_award" v-if="notgetaward">
      <img class="closeaward" @click="notgetaward = false" src="../assets/images/close.png" />
      <img src="../assets/images/food.png" class="awardfood">
      <div class="awardinfor notgetawardinfor">
        <span class="tip">抱歉，您未中奖，祝您下次好运</span>
        <el-button plain class="award_button" @click="tocall">确定</el-button>
        <el-button plain class="award_button" @click="notgetawardshare">分享</el-button>
      </div>
    </div>
    <div class="compose_award" v-if="ifaward">
      <img class="closeaward" @click="ifaward = false" src="../assets/images/close.png" />
      <img src="../assets/images/tie1.png" class="tie tietop">
      <img src="../assets/images/tie2.png" class="tie tiemiddle">
      <img src="../assets/images/awardtitle.png" class="awardtitle">
      <img src="../assets/images/food.png" class="awardfood">
      <div class="awardinfor">
        <el-input v-model="nickname" placeholder="请输入姓名" style="width:50%;margin-bottom:5px" v-if="!ifgetaward">
        </el-input>
        <el-input v-model="inputnumber" placeholder="请输入手机号领奖" style="width:50%;margin-bottom:5px" v-if="!ifgetaward">
        </el-input>
        <div v-else style="width:100%">
          <div class="tip">已提交信息~请耐心等待</div>
          <el-button plain class="award_button" @click="tocall">确定</el-button>
        </div>
        <el-button plain class="award_button" type="danger" @click="getaward" v-if="!ifgetaward">领奖</el-button>
        <el-button plain class="award_button" @click="share">分享</el-button>
      </div>
    </div>
    <div class="compose_share" v-show="ifsharesingle" @click="ifsharesingle=false">
      <canvas id="myCanvas" class="myCanvas" style="border:1px solid #d3d3d3;display:none" width="720" height="1080">
      </canvas>
      <img :src="canvas_toimage" id="canvas_toimage">
      <div class="tip">长按图片保存分享~</div>
    </div>
    <splide :options="primaryOptions" ref="primary" id="splide">
      <splide-slide v-for="(item,index) in legendarray" :key="index" style="margin:30px 0">
        <!-- <img :src="require('../assets/images/card'+(item.id)+'.jpeg')" alt="slide.alt"
          :class="item.ifuserhave==1?item.ifspecial==1?'specialpic':'primarypic':'primarypic_nothave'"> -->
        <videocardrotateY :srcindex="index+1" :videosrc="videosrcarray[index].url" :poster="videosrcarray[index].poster"
          :ifuserhave="item.ifuserhave" :foodname="videosrcarray[index].foodname" ref="myVideo"></videocardrotateY>

        <img src="../assets/images/special.png" v-if="item.ifspecial==1"
          :class="item.ifuserhave==1?'specialicon':'specialiconnothave'">
      </splide-slide>
    </splide>

    <splide :options="secondaryOptions" ref="secondary" style="margin-top:30px" @splide:moved="moved">
      <splide-slide v-for="(item,index) in legendarray" :key="index" :class="item.ifuserhave==1?'':'slidefilter'">
        <img :src="require('../assets/images/card'+(item.id)+'.jpg')" alt="slide.alt" class="primarypic">
      </splide-slide>
    </splide>
    <div class="button_group">
      <!-- <ParticleEffectButton :visible.sync="btnOps.visible" :animating.sync="btnOps.animating" :options="btnOps"
        class="legend_btn" >
        继续抽
      </ParticleEffectButton> -->
      <el-button class="button_style" @click="continue_fun">继续抽</el-button>
      <img src="../assets/images/award.png" @click="showaward" width="80px" v-if="ifcompose">

      <el-button class="button_style" @click="solveshare" v-if="currenthave">分享</el-button>

    </div>

  </div>
</template>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
  import {
    Splide,
    SplideSlide
  } from '@splidejs/vue-splide';
  import {
    createSlides
  } from '../utils/sildes';
  import '@splidejs/splide/dist/css/themes/splide-skyblue.min.css';
  import ParticleEffectButton from "vue-particle-effect-buttons"
  import axios from 'axios'
  import vueDanmaku from 'vue-danmaku'
  import videocardrotateY from "../components/video_cardrotateY.vue"
  export default {
    components: {
      Splide,
      SplideSlide,
      ParticleEffectButton,
      vueDanmaku,
      videocardrotateY
    },
    data() {
      return {
        ifshowtip: false,
        awardlist: [],
        compose_sharepic: "",
        composeindex: 1,
        canvas_toimage: "",
        ifsharesingle: false,
        ifshare: false,
        ifcompose: false,
        picnum: 0,
        primaryOptions: {
          type: 'loop',
          perPage: 1,
          perMove: 1,
          gap: '3rem',
          pagination: false,
          fixedWidth: 260,
          fixedHeight: 390,
          arrows: false,
          focus: 'center',
        },
        secondaryOptions: {
          type: 'slide',
          rewind: true,
          gap: '0.5rem',
          pagination: false,
          fixedWidth: 70,
          fixedHeight: 110,
          cover: true,
          focus: 'center',
          isNavigation: true,
          updateOnMove: true,
        },
        count: 0,
        btnOps: {
          type: "circle",
          easing: "easeOutQuart",
          size: 2,
          particlesAmountCoefficient: 4,
          oscillationCoefficient: 2,
          duration: 500,
          color: function () {
            return Math.random() < 0.5 ? "#000000" : "#ffffff";
          },
          onComplete: () => {
            console.log("complete");
            this.$router.push({
              path: '/gacha/',
              query: {
                ifstart: 0
              }
            });
          },
          onBegin: () => {
            console.log("begin");
          },
          visible: true,
          animating: false
        },
        btnOps2: {
          type: "circle",
          easing: "easeOutQuart",
          size: 2,
          particlesAmountCoefficient: 4,
          oscillationCoefficient: 2,
          duration: 500,
          color: function () {
            return Math.random() < 0.5 ? "#000000" : "#ffffff";
          },
          onComplete: () => {
            console.log("complete");

          },
          onBegin: () => {
            console.log("begin");
          },
          visible: true,
          animating: false
        },
        user_choose: [],
        legendarray: [],
        specialarray: [],
        movesrc: "",
        currenthave: false,
        ifaward: false,
        inputnumber: "",
        nickname: "",
        ifgetaward: false,
        ifcurrentspecial: 0,
        notgetaward: false,
        videosrcarray: [{
            foodname: "鸡子大饼",
            poster: "jzdb",
            url: "http://www.wxrb.com/uploadfiles/202109/17/2021091716035635603990.mp4"
          },
          {
            foodname: "清水油面筋",
            poster: "ymj",
            url: "http://www.wxrb.com/uploadfiles/202109/17/2021091716052444576315.mp4"
          },
          {
            foodname: "无锡酱排骨",
            poster: "jpg",
            url: "http://www.wxrb.com/uploadfiles/202109/17/2021091716042111832717.mp4"
          },
          {
            foodname: "无锡小笼包",
            url: "http://www.wxrb.com/uploadfiles/202109/17/2021091716044011378777.mp4",
            poster: "xlb"
          },
          {
            foodname: "阳山水蜜桃",
            poster: "smt",
            url: "http://www.wxrb.com/uploadfiles/202109/17/2021091716050291300420.mp4"
          },
          {
            foodname: "毛华玉兰饼",
            poster: "ylb",
            url: "http://www.wxrb.com/uploadfiles/202109/17/2021091716055248408046.mp4"
          },
          {
            foodname: "月饼",
            poster: "yb",
            url: "http://www.wxrb.com/uploadfiles/202109/17/2021091716060851507398.mp4"
          }
        ],
        currentIndex: 0
      }
    },
    created() {
      let picnum = this.$store.state.picnum
      this.specialarray = this.$store.state.specialarray
      this.picnum = picnum
      let legendarray = []
      if (localStorage.getItem("user_choose")) {
        let user_choose = JSON.parse(localStorage.getItem("user_choose"))
        this.user_choose = user_choose
        for (let i = 0; i < picnum; i++) {
          legendarray.push({
            id: i + 1,
            ifuserhave: user_choose.indexOf(i + 1) != -1 ? 1 : 0,
            ifspecial: this.specialarray.indexOf(i + 1) != -1 ? 1 : 0
          })
        }
      } else {
        this.user_choose = []
        for (let i = 0; i < picnum; i++) {
          legendarray.push({
            id: i + 1,
            ifuserhave: 0
          })
        }
      }
      //console.log(legendarray)
      this.legendarray = legendarray
      if (this.user_choose.length == this.$store.state.picnum || this.user_choose.length > this.$store.state.picnum) {
        this.ifcompose = true
      }
      if (this.user_choose.indexOf(1) != -1) {
        this.currenthave = true
      }
      if (localStorage.getItem("ifshowtip")) {
        this.getawardlist()
      } else {
        this.ifshowtip = true
      }
    },
    mounted() {
      // Set the sync target.
      this.$refs.primary.sync(this.$refs.secondary.splide);
      this.movesrc = require("../assets/images/card" + '1' + ".jpg")
    },
    methods: {
      tocall() {
        this.$router.push({
          path: "/gacha/call"
        })
      },
      showtip() {
        this.ifshowtip = false
        localStorage.setItem("ifshowtip", true)
        this.getawardlist()
      },
      getawardlist() {
        axios.post("/gacha/getawardlist").then(param => {
          if (param.status == 200) {
            let list = param.data
            var awardlist = []
            list.map((item) => {
              awardlist.push({
                nickname: item.nickname
              })
            })
            this.awardlist = awardlist
          }
        })
      },
      getaward() {
        var str = this.inputnumber
        var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
        var that = this
        if (!myreg.test(str)) {
          this.$message("请填写正确的手机号");
        } else {
          var formData = new FormData();
          formData.append("phone", this.inputnumber)
          formData.append("nickname", this.nickname)
          console.log(formData)
          axios.post("/gacha/getaward", formData).then(param => {
            console.log(param)
            var status = param.status
            if (status == 200) {
              this.ifgetaward = true
              this.ifaward = false
              if (param.data == "ok") {
                localStorage.setItem("phone", this.inputnumber)
                this.awardlist.push({
                  nickname: this.nickname
                })
                setTimeout(() => {
                  that.$router.push({
                    path: "/gacha/call"
                  })
                }, 2000);
              } else {
                this.$message(param.data);
              }
            }
          })
        }

      },
      notgetawardshare() {
        this.notgetaward = false
        this.ifshare = true
      },
      share() {
        this.ifaward = false
        this.ifshare = true
      },
      showaward() {
        var ifaward = localStorage.getItem("ifaward")
        var formData = new FormData();
        var localphone = localStorage.getItem("phone")
        formData.append("phone", localphone)
        formData.append("nickname", this.nickname)
        if (ifaward) {
          if (ifaward == 0) {
            //没中奖
            this.notgetaward = true
          } else if (ifaward == 1) {
            axios.post("/gacha/ifgetaward", formData).then(param => {
              var status = param.status
              if (status == 200) {
                //没中奖
                if (param.data == "未查询到") {
                  this.notgetaward = true
                } else {
                  //中奖了
                  if (localphone == null) {
                    //中奖了但没填信息
                    this.ifaward = true //填写中奖信息
                  } else {
                    this.ifgetaward = true
                    this.ifaward = true
                  }
                }
                this.compose_sharepic = require("../assets/images/share.jpeg")
                this.btnOps2.visible = true
              }
            })

            // } else {
            // 
            // }

          }
        } else {
          //未进行抽奖
          axios.post("/gacha/setgathercount").then(param => {
            console.log("已更新集齐人数：")
          })
          axios.post("/gacha/getchance").then(param => {
            console.log("已获取中奖概率")
            var chance = 0
            if (param.status == 200) {
              chance = Number(param.data)
            } else {
              chance = 10
            }
            var userchance = Math.round(Math.random() * 100);
            if (userchance < chance) {
              //中奖了
              this.ifaward = true //填写中奖信息
              localStorage.setItem("ifaward", 1)
              axios.post("/gacha/setawardcount").then(param => {
                console.log("已更新奖品数量")
              })
            } else {
              this.notgetaward = true
              localStorage.setItem("ifaward", 0)

            }
          })

          this.compose_sharepic = require("../assets/images/share.jpeg")
          this.btnOps2.visible = true
        }

      },
      moved(splide, newIndex) {
        this.ifcurrentspecial = this.legendarray[newIndex].ifspecial
        this.movesrc = require("../assets/images/card" + (newIndex + 1) + ".jpg")
        var havearray = JSON.parse(localStorage.getItem("user_choose"))
        var canshare = false
        for (let i = 0; i < havearray.length; i++) {
          if (Number(newIndex + 1) == havearray[i]) {
            canshare = true
            break
          }
        }
        if (canshare) {
          this.currenthave = true
        } else {
          this.currenthave = false
        }
        this.$refs.myVideo[this.currentIndex].pauseVideo();
        this.currentIndex = newIndex
      },
      continue_fun() {
        var base_URL = this.$store.state.base_URL
        this.$router.push({
          path: '/gacha/',
          query: {
            ifstart: 0
          }
        });
      },
      sharesingle() {
        //调用
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        var img = document.getElementById("target");
        var qr_code = document.getElementById("qr_code");

        var slogan = document.getElementById("slogan")
        ctx.drawImage(img, 0, 0, 720, 1080);
        // ctx.drawImage(img, (cw - imgW) / 2, 0, imgW, imgH);
        ctx.drawImage(qr_code, 320, 950, 80, 80);
        ctx.drawImage(slogan, 530, 25, 180, 60)
        if (this.ifcurrentspecial) {
          var yc = document.getElementById("yc")
          ctx.drawImage(yc, 500, 380, 60, 130)
        }

        // ctx.font = "12px A=rial";
        // ctx.fillText("无锡观察", 30, 30);
        // ctx.fillText("技术运营部出品", 30, 50);
        // $("#myCanvas").show()
        let imageurl = c.toDataURL('image/png')
        //  resolve(imageurl)
        this.ifsharesingle = true
        this.canvas_toimage = imageurl
      },

      async solveshare() {
        try {
          let imageurl = await this.sharesingle()
          let dataImg = document.getElementById("canvas_toimage")
          try {
            // dataImg.src = imageurl
            this.ifsharesingle = true
          } catch (e) {
            console.log(e);
          }
          $("#canvas_toimage").show()
          let urlImg = dataImg.src //urlImg为img路径
          console.log(urlImg)
        } catch (error) {
          console.log(error)
        }
      }
    }
  }
</script>

<style scoped lang="less">
  .wrapper {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: url('../assets/images/legendbg.png');
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;

    .clicktip {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.4);
      color: white;
      z-index: 5;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
    }

    .slidefilter {
      filter: grayscale(100%);
    }

    .button_group {
      display: flex;
      align-items: center;
      margin-top: 15px;
      justify-content: space-around;

      .button_style {
        width: 96px;
        height: 39px;
        position: relative;
        bottom: 3px;
        background: RGB(48, 72, 91);
        color: white;
        border: 0;
      }
    }

    .tip {
      color: white;
      font-size: 12px;
      margin-top: 10px;
    }

    .compose_share,
    .compose_award {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.3);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 5;

      img {
        width: 70%;
      }
    }

    .primarypic,
    .primarypic_nothave,
    .specialpic {
      width: 260px;
    }

    .specialpic {
      box-shadow: 0 0px 30px #ffbf0a;
    }

    .primarypic_nothave {
      filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
      -moz-filter: grayscale(100%);
      -ms-filter: grayscale(100%);
      -o-filter: grayscale(100%);
      -webkit-filter: grayscale(100%);
      filter: grayscale(100%);
      opacity: 0.9;
    }

    .legend_btn {
      height: 39px;
    }

    ::v-deep .vue-particle-effect-button .particles-button {
      padding: 0.5rem 2rem;
      background: RGB(48, 72, 91);

    }



    .cardcontainer {
      width: 80%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-around;
      flex-wrap: wrap;
    }

    .specialicon,
    .specialiconnothave {
      position: absolute;
      top: -30px;
      right: -30px;
      width: 120px;
      height: 200px;
      opacity: 0.8;
    }

    .specialiconnothave {
      filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
      -moz-filter: grayscale(100%);
      -ms-filter: grayscale(100%);
      -o-filter: grayscale(100%);
      -webkit-filter: grayscale(100%);
      filter: grayscale(100%);
      opacity: 0.9;
    }

    .awardtitle {
      width: 250px;
      animation: awardtitlemove 0.5s alternate infinite;
      position: absolute;
      top: 0px;
    }

    @keyframes awardtitlemove {
      0% {
        width: 250px;
      }

      100% {
        width: 300px;
      }
    }

    .award_button {
      width: 50%;
      margin: 5px 0;
    }

    .tip {
      color: white;
      font-size: 15px;
      margin-bottom: 10px;
    }

    .closeaward {
      width: 40px !important;
      height: 40px !important;
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 3;
    }

    .awardfood {
      animation: appeardiv 1.5s forwards;
      animation-delay: 1s;
      opacity: 0;
    }

    .awardinfor {
      animation: appeardiv 1.5s forwards;
      animation-delay: 2s;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
    }

    .notgetawardinfor {
      animation-delay: 0.5s;
    }

    @keyframes appeardiv {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }

    .tie {
      width: 100% !important;
      position: absolute;
    }

    .tietop {
      top: 0;
    }

    .tiebottom {
      bottom: 0;
    }
  }
</style>